{% extends "admin/base.html" %} {% block title %}分类列表{% endblock title %} {% block content %}


<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">分类列表</li>
    </ol>
</nav>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#typesAddModal" data-whatever="@mdo">添加分类</button>

<table style="margin-top:10px;" class="table table-sm">
    <thead>
        <tr>
            <th scope="col">分类名称</th>
            <th scope="col">图标</th>
            <th scope="col">封面</th>
            <th scope="col">是否显示</th>
            <th scope="col">优先级</th>
            <th scope="col">操作</th>
        </tr>
    </thead>
    <tbody>
        {% for t in types %}
        <tr>
            <th class="row">{{t.node.name}}</th>
            <td><img src="{{t.node.icon}}" alt="" style="height:30px;"></td>
            <td><img src="{{t.node.pic}}" alt="" style="height:30px;"></td>
            <td>{%if t.node.hidden%}否{%else%}是{%endif%}</td>
            <td>{{t.node.rank}}</td>
            <td>
                <div class="btn-group btn-group-sm" role="group">
                    <a href="?edit={{t.node.id}}" class="btn btn-primary">编辑</a>
                    <a href="javascript:void(0)" onclick="deleteType('{{t.node.id}}')" class="btn btn-danger">删除</a>
                </div>
            </td>
        </tr>
        {% for t1 in t.children %}
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="/admin/article/?tid={{t1.node.id}}" class="">{{t1.node.name}}</a></td>
            <td><img src="{{t1.node.icon}}" alt="" style="height:30px;"></td>
            <td><img src="{{t1.node.pic}}" alt="" style="height:30px;"></td>
            <td>{%if t1.node.hidden%}否{%else%}是{%endif%}</td>
            <td>{{t1.node.rank}}</td>
            <td>
                <div class="btn-group btn-group-sm" role="group">
                    <a href="?edit={{t1.node.id}}" class="btn btn-primary">编辑</a>
                    <a href="/admin/article/add?add={{t1.node.id}}" class="btn btn-warning">添加章节</a>
                    <a href="javascript:void(0)" onclick="deleteType('{{t1.node.id}}')" class="btn btn-danger">删除</a>
                </div>
            </td>
        </tr>
        {% endfor %} {% endfor %}
    </tbody>
</table>




<div class="modal fade" id="typesAddModal" tabindex="-1" aria-labelledby="typesAddModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="typesAddModalLabel">添加分类</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="typeForm">
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">分类名称:</label>
                        <input name="name" type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="hidden" value="1" id="flexRadioDefault1" checked>
                            <label class="form-check-label" for="flexRadioDefault1">
                              隐藏教程
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="hidden" value="0" id="flexRadioDefault2">
                            <label class="form-check-label" for="flexRadioDefault2">
                              显示教程
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">上级分类:</label>
                        <select class="form-control" aria-label="" name="pid">
                            <option value="" selected>顶级分类</option>
                            {% for t in types %}
                            {% if t.node.pid != "" %}{% break %}{% endif %}
                            <option value="{{t.node.id}}">{{t.node.name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">优先级:</label>
                        <input name="rank" type="number" class="form-control" id="recipient-name">
                    </div>

                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">关键词:</label>
                        <input name="keyword" type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">简介:</label>
                        <textarea name="description" class="form-control" id="message-text"></textarea>
                    </div>

                    <div class="input-group">
                        <label class="message-text" for="inputGroupFile01">课程图标:</label>
                        <img class="iconImg" onclick="uploadPhoto('iconFile')" src="/adm/imgs/icon_add.png" />
                    </div>

                    <div class="input-group">
                        <label class="message-text" for="inputGroupFile01">课程封面:</label>
                        <img class="picImg" onclick="uploadPhoto('picFile')" src="/adm/imgs/icon_add.png" />
                    </div>
                    <input type="hidden" name="id">
                    <input type="hidden" name="icon" id="iconFileName">
                    <input type="hidden" name="pic" id="picFileName">

                </form>

                <input type="file" id="iconFile" style="display: none;" onchange="upload('iconFile','iconImg','iconFileName')">
                <input type="file" id="picFile" style="display: none;" onchange="upload('picFile', 'picImg', 'picFileName')">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="submitTypeForm('typeForm', 'post', '/admin/types/')">添加</button>
            </div>
        </div>
    </div>
</div>


{% if edit_type %}
<div class="modal fade" id="typesEditModal" tabindex="-1" aria-labelledby="typesEditModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="typesEditModalLabel">编辑分类</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="typeEditForm">
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">分类名称:</label>
                        <input name="name" type="text" value="{{edit_type.name}}" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="hidden" value="1" id="hiddenEdit1" {%if edit_type.hidden%}checked{%endif%}>
                            <label class="form-check-label" for="hiddenEdit1">
                              隐藏教程
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="hidden" value="0" id="hiddenEdit2" {%if edit_type.hidden==false%}checked{%endif%}>
                            <label class="form-check-label" for="hiddenEdit2">
                              显示教程
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">上级分类:</label>
                        <select class="form-control" aria-label="" name="pid">
                            {% if edit_type.pid == "" %}
                            <option value="" selected>顶级分类</option>
                            {% endif %}
                            {% for t in types %}
                            {% if t.node.pid != "" %}{% break %}{% endif %}
                            <option value="{{t.node.id}}"  {% if t.node.id == edit_type.pid %}selected{% endif %}>{{t.node.name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">优先级:</label>
                        <input name="rank" type="number" value="{{edit_type.rank}}" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">关键词:</label>
                        <input name="keyword" type="text" value="{{edit_type.keyword}}" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">简介:</label>
                        <textarea name="description" class="form-control" id="message-text">{{edit_type.description}}</textarea>
                    </div>

                    <div class="input-group">
                        <label class="message-text" for="inputGroupFile01">课程图标:</label>
                        <img class="editIconImg" onclick="uploadPhoto('editIconFile')" src="{% if edit_type.icon=='' %}/adm/imgs/icon_add.png{%else%}{{edit_type.icon}}{%endif%}" />
                    </div>

                    <div class="input-group">
                        <label class="message-text" for="inputGroupFile01">课程封面:</label>
                        <img class="editPicImg" onclick="uploadPhoto('editPicFile')" src="{% if edit_type.pic=='' %}/adm/imgs/icon_add.png{%else%}{{edit_type.pic}}{%endif%}" />
                    </div>
                    <input type="hidden" name="id" value="{{edit_type.id}}">
                    <input type="hidden" name="icon" value="{{edit_type.icon}}" id="editIconFileName">
                    <input type="hidden" name="pic" value="{{edit_type.pic}}" id="editPicFileName">

                </form>

                <input type="file" id="editIconFile" style="display: none;" onchange="upload('editIconFile','editIconImg','editIconFileName')">
                <input type="file" id="editPicFile" style="display: none;" onchange="upload('editPicFile', 'editPicImg', 'editPicFileName')">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="submitTypeForm('typeEditForm','put', '/admin/types/')">编辑</button>
            </div>
        </div>
    </div>
</div>
{% endif %} {% endblock content %} {%block style%}
<style type="text/css">
    .editIconImg,
    .iconImg {
        width: 70px;
        cursor: pointer;
    }
    
    .editPicImg,
    .picImg {
        width: 70px;
        cursor: pointer;
    }
</style>
{%endblock style%} {% block script %} {% if edit_type %}
<script type="text/javascript">
    // 如果是编辑，就显示编辑窗口

    $('#typesEditModal').modal("show");
</script>
{% endif %}
<script type="text/javascript">
    function uploadPhoto(file) {
        $("#" + file).click();
    }

    /**
     * 上传图片
     */
    function upload(file, img, name) {
        if ($("#" + file).val() == '') {
            return;
        }
        var formData = new FormData();
        formData.append('img', document.getElementById(file).files[0]);
        $.ajax({
            url: "/admin/article/upload",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                data = JSON.parse(data);
                if (data.code == 0) {
                    $("." + img).attr("src", data.src);
                    $("#" + name).val(data.src);
                } else {
                    alert(data.errMsg);
                }
            },
            error: function(data) {
                alert("上传失败")
            }
        });
    }

    function deleteType(id) {

        var ret = confirm("确认删除该分类吗?");
        if (!ret) {
            return;
        }

        $.ajax({
            url: "/admin/types/?delete=" + id,
            type: "delete",
            contentType: "application/json; charset=utf-8",
            success: function(res) {
                if (res.errno == 0) {
                    window.location.href = "/admin/types/";
                } else {
                    alert(res.msg);
                }
            },
            error: function(e) {
                alert("错误！！");
            }
        });
    }


    function submitTypeForm(formId, type, url) {

        var formObject = {};
        var formArray = $("#" + formId).serializeArray();
        $.each(formArray, function(i, item) {
            formObject[item.name] = item.value;
        });

        $.ajax({
            url: url,
            type: type,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(formObject, function(key, value) {
                if (key == "rank") {
                    return parseInt(value);
                }
                if (key == "hidden") {
                    return parseInt(value) == 1 ? true : false;
                }
                return value;
            }),
            dataType: "json",
            success: function(res) {
                if (res.errno == 0) {
                    window.location.href = "/admin/types/";
                } else {
                    alert(res.msg);
                }
            },
            error: function(e) {
                alert("错误！！");
            }
        });
    }
</script>
{% endblock script %}